import React, { useEffect } from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import {
	View,
	Image,
	ImageSourcePropType,
	Text,
	TouchableOpacity,
	ImageBackground,
	Button,
	Platform,
	BackHandler,
} from 'react-native'

import { commonStyle } from 'styles'
import { appHomeStyle } from './styles'
import assets from './assets'
import { Division, Toast } from 'components';
import { useAuthorization, operate } from 'services/authorization'
import env from 'constants/env.json'
import { PosModule } from 'native-modules';
import { navigate, navigator } from 'services/navigation';
import { Alert } from 'react-native';

interface GridItem {
	title: string
	icon: ImageSourcePropType
	onPress: () => void
}

const AppHomeScreen: NavigationStackScreenComponent = props => {

	const { state } = useAuthorization();

	const onBackAndroid = () => {
		Toast.show('请先退出登录！')
		return true;

	}

	useEffect(() => {
		if (Platform.OS === 'android') {
			BackHandler.addEventListener('hardwareBackPress', onBackAndroid);
		}
		return () => {
			if (Platform.OS === 'android') {
				BackHandler.removeEventListener('hardwareBackPress', onBackAndroid);
			}
		}
	}, [])

	useEffect(() => {
		let ss: any
		if (Platform.OS === 'android') {
			ss = props.navigation.addListener('willBlur', () => { BackHandler.removeEventListener('hardwareBackPress', onBackAndroid) });

		}
		return () => {
			if (Platform.OS === 'android') {
				ss && ss.remove()
			}
		}
	}, [])

	useEffect(() => {
		let ss: any
		if (Platform.OS === 'android') {
			ss = props.navigation.addListener('willFocus', () => { BackHandler.addEventListener('hardwareBackPress', onBackAndroid) });

		}
		return () => {
			if (Platform.OS === 'android') {
				ss && ss.remove()
			}
		}
	}, [])

	// 银联的调用不能并发
	let ylFlag = false

	const gridData: GridItem[][] = [
		[
			{
				title: '收筹金',
				icon: assets.images.icon_remuneration,
				onPress: () => {
					props.navigation.navigate('IDCardIdentity', { nextRouteName: 'BookList' })
				},
			},
			{
				title: '收楼款',
				icon: assets.images.icon_building,
				onPress: () => {
					props.navigation.navigate('IDCardIdentity', { nextRouteName: 'FundList' })
				},
			},
			{
				title: '收代收费',
				icon: assets.images.icon_generation_charge,
				onPress: () => {
					props.navigation.navigate('IDCardIdentity', { nextRouteName: 'CollectionCharges' })
				},
			},
		],
		[
			{
				title: '收暂收款',
				icon: assets.images.icon_temporary_payment,
				onPress: () => {
					props.navigation.navigate('IDCardIdentity', { nextRouteName: 'ChooseCustomer' })
				},
			},
			{
				title: '收补差款',
				icon: assets.images.icon_arrears,
				onPress: () => {
					props.navigation.navigate('IDCardIdentity', { nextRouteName: 'FillingInFund' })
				},
			},
			{
				title: '撤销',
				icon: assets.images.icon_cancel,
				onPress: () => {
					props.navigation.navigate('CancelSignIn')
				},
			},
		],
		[{
			title: '已收款项',
			icon: assets.images.icon_trade,
			onPress: () => {
				props.navigation.navigate('IDCardIdentity', { nextRouteName: 'TradeList' })
			},
		}, {
			title: '签到',
			icon: assets.images.icon_sign,
			onPress: () => {
				if (ylFlag) return
				ylFlag = true
				PosModule.sign().finally(() => { ylFlag = false })
			},
		}, {
			title: '换班',
			icon: assets.images.icon_balance,
			onPress: () => {
				if (ylFlag) return
				ylFlag = true
				PosModule.balance().finally(() => { ylFlag = false })
			},
		},],
		[{
			title: '余额查询',
			icon: assets.images.icon_balance_ye,
			onPress: () => {
				if (ylFlag) return
				ylFlag = true
				PosModule.balanceYe().finally(() => { ylFlag = false })
			},
		},]
	]


	const renderGridItem = (item: GridItem) => {
		return (
			<TouchableOpacity
				style={appHomeStyle.gridItem}
				key={item.title}
				activeOpacity={0.8}
				onPress={() => { operate(); item.onPress(); }}>
				<Image style={appHomeStyle.gridIcon} source={item.icon} />
				<Text style={appHomeStyle.gridTitle}>{item.title}</Text>
			</TouchableOpacity>
		)
	}

	const renderGridRow = (data: GridItem[], index: number) => {
		return (
			<View key={index} style={commonStyle.containerColumn}>
				<View style={commonStyle.containerRow}>{data.map(item => renderGridItem(item))}</View>
				<Division />
			</View>
		)
	}

	return (
		<View style={commonStyle.containerColumn}>
			<ImageBackground source={assets.images.home_bg} style={appHomeStyle.banner}>
				<TouchableOpacity
					style={appHomeStyle.setting}
					onPress={() => {
						operate()
						props.navigation.navigate('Setting')
					}}>
					<Image source={assets.images.icon_setting} />
				</TouchableOpacity>
				<View style={appHomeStyle.authContainer}>
					<Text style={appHomeStyle.projectText}>{state.userName}（用户）</Text>
					<View style={{ flexDirection: 'row', width: '100%', overflow: 'hidden' }}>
						<Text style={appHomeStyle.projectText} >当前项目：</Text>
						<Text style={[appHomeStyle.projectText, { flex: 1 }]} >{state.project.name}</Text>
					</View>
				</View>
			</ImageBackground>
			{gridData.map((data, index) => renderGridRow(data, index))}
			{env.env !== "prod" ? <Button title="打印测试" onPress={() => { operate(); props.navigation.navigate('DemoScreen') }} /> : null}
		</View>
	)
}

AppHomeScreen.navigationOptions = props => {
	return { header: null }
}

export default AppHomeScreen
